<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>收益中心 - 共享米宝</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="app-container max-w-md mx-auto bg-white min-h-screen relative pb-16">
        <!-- Header -->
        <header class="bg-white sticky top-0 z-10 shadow-sm">
            <div class="flex justify-between items-center p-4">
                <h1 class="text-lg font-medium">收益中心</h1>
                <a href="#" class="text-gray-600">
                    <i class="fas fa-bell"></i>
                </a>
            </div>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Earnings Summary -->
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
                <div class="text-center mb-4">
                    <div class="text-sm opacity-80">累计总收益</div>
                    <div class="text-3xl font-bold mt-1">¥1,049.77</div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mt-6">
                    <div class="text-center">
                        <div class="text-sm opacity-80">本月收益</div>
                        <div class="text-xl font-medium mt-1">¥235.60</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">可提现</div>
                        <div class="text-xl font-medium mt-1">¥235.60</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">已提现</div>
                        <div class="text-xl font-medium mt-1">¥814.17</div>
                    </div>
                </div>
                
                <button class="w-full bg-white text-blue-600 font-medium rounded-md py-2 mt-6" id="withdraw-btn">
                    立即提现
                </button>
            </div>

            <!-- Earnings Categories -->
            <div class="bg-white p-4">
                <h2 class="font-medium mb-4">收益明细</h2>
                <div class="grid grid-cols-1 gap-4">
                    <!-- Investment Earnings -->
                    <a href="earnings-investor.html" class="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-3 rounded-full mr-4">
                                <i class="fas fa-battery-full text-blue-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">投资收益</div>
                                <div class="text-sm text-gray-500 mt-1">
                                    设备收益分润
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="text-right mr-2">
                                <div class="font-medium text-green-600">¥685.42</div>
                                <div class="text-xs text-gray-500">本月收益</div>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </a>

                    <!-- Referral Earnings -->
                    <a href="earnings-referral.html" class="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-3 rounded-full mr-4">
                                <i class="fas fa-share-alt text-yellow-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">分享收益</div>
                                <div class="text-sm text-gray-500 mt-1">
                                    好友消费分润
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="text-right mr-2">
                                <div class="font-medium text-green-600">¥128.75</div>
                                <div class="text-xs text-gray-500">本月收益</div>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </a>

                    <!-- Recruiter Earnings -->
                    <a href="earnings-recruiter.html" class="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-purple-100 p-3 rounded-full mr-4">
                                <i class="fas fa-user-tie text-purple-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">招商收益</div>
                                <div class="text-sm text-gray-500 mt-1">
                                    投资人收益分成
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="text-right mr-2">
                                <div class="font-medium text-green-600">¥235.60</div>
                                <div class="text-xs text-gray-500">本月收益</div>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Recent Transactions -->
            <div class="bg-white mt-4 p-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-medium">最近交易</h2>
                    <a href="#" class="text-sm text-blue-500">查看全部</a>
                </div>
                
                <div class="divide-y">
                    <!-- Transaction 1 -->
                    <div class="py-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="bg-blue-100 p-2 rounded-md mr-3">
                                    <i class="fas fa-plus text-blue-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">投资收益</div>
                                    <div class="text-xs text-gray-500 mt-1">设备ID: MB12345</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥12.50</div>
                                <div class="text-xs text-gray-500">18:23</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 2 -->
                    <div class="py-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="bg-yellow-100 p-2 rounded-md mr-3">
                                    <i class="fas fa-plus text-yellow-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">分享收益</div>
                                    <div class="text-xs text-gray-500 mt-1">来自: 李小红</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥3.50</div>
                                <div class="text-xs text-gray-500">15:42</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 3 -->
                    <div class="py-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="bg-purple-100 p-2 rounded-md mr-3">
                                    <i class="fas fa-plus text-purple-500 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">招商收益</div>
                                    <div class="text-xs text-gray-500 mt-1">来自: 张志强</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥6.40</div>
                                <div class="text-xs text-gray-500">10:15</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <!-- <nav class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around items-center p-2 max-w-md mx-auto">
       
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-user text-blue-500 text-xl"></i>
                <div class="text-xs mt-1  text-blue-500">我的</div>
            </a>
        </nav> -->
    </div>

    <!-- 提现弹窗 -->
    <div id="withdraw-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-lg w-full max-w-md mx-4">
            <div class="p-4 border-b">
                <h3 class="text-lg font-medium">提现</h3>
            </div>
            <div class="p-4">
                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">提现金额</label>
                    <div class="flex items-center border border-gray-300 rounded-md overflow-hidden">
                        <span class="px-3 py-2 bg-gray-100 text-gray-600">¥</span>
                        <input type="number" id="withdraw-amount" class="flex-1 px-3 py-2 focus:outline-none" placeholder="请输入提现金额" value="235.60">
                    </div>
                    <div class="text-xs text-gray-500 mt-1">可提现金额: ¥235.60</div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">提现方式</label>
                    <div class="grid grid-cols-3 gap-2">
                        <button class="withdrawal-method-btn border border-blue-500 rounded-md p-2 text-center bg-blue-50 text-blue-500" data-method="wechat">
                            <i class="fab fa-weixin text-lg mb-1"></i>
                            <div class="text-xs">微信支付</div>
                        </button>
                        <button class="withdrawal-method-btn border border-gray-300 rounded-md p-2 text-center" data-method="alipay">
                            <i class="fab fa-alipay text-lg mb-1"></i>
                            <div class="text-xs">支付宝</div>
                        </button>
                        <button class="withdrawal-method-btn border border-gray-300 rounded-md p-2 text-center" data-method="bank">
                            <i class="fas fa-credit-card text-lg mb-1"></i>
                            <div class="text-xs">银行卡</div>
                        </button>
                    </div>
                </div>

                <div id="wechat-info" class="mb-4">
                    <label class="block text-sm text-gray-600 mb-1">微信账号</label>
                    <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none" placeholder="请输入微信账号">
                </div>

                <div id="alipay-info" class="mb-4 hidden">
                    <label class="block text-sm text-gray-600 mb-1">支付宝账号</label>
                    <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none" placeholder="请输入支付宝账号">
                </div>

                <div id="bank-info" class="mb-4 hidden">
                    <label class="block text-sm text-gray-600 mb-1">银行卡号</label>
                    <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none" placeholder="请输入银行卡号">
                    
                    <label class="block text-sm text-gray-600 mb-1 mt-3">开户行</label>
                    <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none" placeholder="请输入开户行">
                    
                    <label class="block text-sm text-gray-600 mb-1 mt-3">持卡人姓名</label>
                    <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none" placeholder="请输入持卡人姓名">
                </div>
            </div>
            <div class="p-4 border-t flex space-x-3">
                <button id="cancel-withdraw" class="flex-1 py-2 border border-gray-300 rounded-md text-gray-600">
                    取消
                </button>
                <button id="confirm-withdraw" class="flex-1 py-2 bg-blue-500 rounded-md text-white">
                    确认提现
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 提现功能
            const withdrawBtn = document.getElementById('withdraw-btn');
            const withdrawModal = document.getElementById('withdraw-modal');
            const cancelWithdraw = document.getElementById('cancel-withdraw');
            const confirmWithdraw = document.getElementById('confirm-withdraw');
            const withdrawAmount = document.getElementById('withdraw-amount');
            const withdrawalMethodBtns = document.querySelectorAll('.withdrawal-method-btn');
            const wechatInfo = document.getElementById('wechat-info');
            const alipayInfo = document.getElementById('alipay-info');
            const bankInfo = document.getElementById('bank-info');
            
            // 显示提现弹窗
            withdrawBtn.addEventListener('click', function() {
                withdrawModal.classList.remove('hidden');
            });
            
            // 关闭提现弹窗
            cancelWithdraw.addEventListener('click', function() {
                withdrawModal.classList.add('hidden');
            });
            
            // 切换提现方式
            withdrawalMethodBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有按钮的选中状态
                    withdrawalMethodBtns.forEach(b => {
                        b.classList.remove('border-blue-500', 'bg-blue-50', 'text-blue-500');
                        b.classList.add('border-gray-300');
                    });
                    
                    // 添加当前按钮的选中状态
                    this.classList.remove('border-gray-300');
                    this.classList.add('border-blue-500', 'bg-blue-50', 'text-blue-500');
                    
                    // 显示对应的信息输入区域
                    const method = this.getAttribute('data-method');
                    wechatInfo.classList.add('hidden');
                    alipayInfo.classList.add('hidden');
                    bankInfo.classList.add('hidden');
                    
                    if (method === 'wechat') {
                        wechatInfo.classList.remove('hidden');
                    } else if (method === 'alipay') {
                        alipayInfo.classList.remove('hidden');
                    } else if (method === 'bank') {
                        bankInfo.classList.remove('hidden');
                    }
                });
            });
            
            // 确认提现
            confirmWithdraw.addEventListener('click', function() {
                const amount = withdrawAmount.value;
                if (!amount || parseFloat(amount) <= 0) {
                    alert('请输入有效的提现金额');
                    return;
                }
                
                // 检查是否选择了提现方式
                const selectedMethod = document.querySelector('.withdrawal-method-btn.border-blue-500');
                if (!selectedMethod) {
                    alert('请选择提现方式');
                    return;
                }
                
                // 检查对应的账号信息
                const method = selectedMethod.getAttribute('data-method');
                let accountInfo;
                
                if (method === 'wechat') {
                    accountInfo = wechatInfo.querySelector('input').value;
                    if (!accountInfo) {
                        alert('请输入微信账号');
                        return;
                    }
                } else if (method === 'alipay') {
                    accountInfo = alipayInfo.querySelector('input').value;
                    if (!accountInfo) {
                        alert('请输入支付宝账号');
                        return;
                    }
                } else if (method === 'bank') {
                    const cardNumber = bankInfo.querySelector('input:nth-child(2)').value;
                    const bankName = bankInfo.querySelector('input:nth-child(4)').value;
                    const cardHolder = bankInfo.querySelector('input:nth-child(6)').value;
                    
                    if (!cardNumber || !bankName || !cardHolder) {
                        alert('请填写完整的银行卡信息');
                        return;
                    }
                    
                    accountInfo = `${bankName} - ${cardNumber.substring(cardNumber.length - 4)}`;
                }
                
                // 提交提现申请
                alert(`提现申请已提交，金额: ¥${amount}，提现方式: ${method === 'wechat' ? '微信支付' : method === 'alipay' ? '支付宝' : '银行卡'}`);
                withdrawModal.classList.add('hidden');
            });
        });
    </script>
</body>
</html> 